// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react';

type SvgProps = {
    width?: number;
    height?: number;
}

const GroupsSVG = (props: SvgProps) => (
    <svg
        width={props.width ? props.width.toString() : '184'}
        height={props.height ? props.height.toString() : '113'}
        viewBox='0 0 184 113'
        fill='none'
        xmlns='http://www.w3.org/2000/svg'
    >
        <g clipPath='url(#clip0_4441_155270)'>
            <rect
                x='2.745'
                y='15'
                width='181'
                height='78'
                rx='5.625'
                fill='var(--button-bg)'
                fillOpacity='0.12'
            />
            <path
                d='M11 4L16.5 9.5V63.5H37.5'
                stroke='var(--center-channel-color)'
                strokeOpacity='0.24'
                strokeLinecap='round'
            />
            <circle
                cx='2.5'
                cy='2.5'
                r='2.5'
                transform='matrix(1 0 0 -1 7 5)'
                fill='#8C8C8C'
            />
            <path
                d='M4 28L9.5 33.5V72.5H174.5V101.5'
                stroke='var(--center-channel-color)'
                strokeOpacity='0.24'
                strokeLinecap='round'
            />
            <circle
                cx='2.5'
                cy='2.5'
                r='2.5'
                transform='matrix(1 0 0 -1 172 105)'
                fill='#8C8C8C'
            />
            <circle
                cx='2.5'
                cy='2.5'
                r='2.5'
                transform='matrix(1 0 0 -1 0 29)'
                fill='#8C8C8C'
            />
            <path
                d='M59.1304 15H126.87L131 108H55L59.1304 15Z'
                fill='var(--center-channel-color)'
                fillOpacity='0.24'
            />
            <rect
                width='92'
                height='5'
                transform='matrix(1 0 0 -1 47 113)'
                fill='var(--center-channel-color)'
                fillOpacity='0.4'
            />
            <rect
                x='27'
                y='9'
                width='131'
                height='86'
                rx='4'
                fill='var(--center-channel-bg)'
                stroke='var(--center-channel-color)'
                strokeWidth='4'
            />
            <path
                d='M147 101.5H119.5'
                stroke='var(--center-channel-color)'
                strokeLinecap='round'
                strokeLinejoin='round'
            />
            <path
                d='M116 101.5H110'
                stroke='var(--center-channel-color)'
                strokeLinecap='round'
            />
            <path
                d='M107 101.5H101'
                stroke='var(--center-channel-color)'
                strokeLinecap='round'
            />
            <path
                d='M138.518 43.1646C138.518 53.0156 130.498 61.0007 120.606 61.0007C114.997 61.0007 109.99 58.4339 106.706 54.4147C104.198 51.3453 102.694 47.4301 102.694 43.1646C102.694 33.3136 110.714 25.3285 120.606 25.3285C130.498 25.3285 138.518 33.3136 138.518 43.1646Z'
                fill='var(--center-channel-bg)'
            />
            <path
                d='M138.518 43.1646C138.518 53.0156 130.498 61.0007 120.606 61.0007C114.997 61.0007 109.99 58.4339 106.706 54.4147C104.198 51.3453 102.694 47.4301 102.694 43.1646C102.694 33.3136 110.714 25.3285 120.606 25.3285C130.498 25.3285 138.518 33.3136 138.518 43.1646Z'
                fill='var(--center-channel-color)'
                fillOpacity='0.12'
            />
            <mask
                id='mask0_4441_155270'
                mask-type='luminance'
                maskUnits='userSpaceOnUse'
                x='102'
                y='25'
                width='37'
                height='37'
            >
                <path
                    d='M138.518 43.1646C138.518 53.0156 130.498 61.0007 120.606 61.0007C114.997 61.0007 109.99 58.4339 106.706 54.4147C104.198 51.3453 102.694 47.4301 102.694 43.1646C102.694 33.3136 110.714 25.3285 120.606 25.3285C130.498 25.3285 138.518 33.3136 138.518 43.1646Z'
                    fill='white'
                />
            </mask>
            <g mask='url(#mask0_4441_155270)'>
                <path
                    d='M129.928 54.2452L129.228 40.2453C128.93 34.2984 125.16 29.6744 120.609 29.6744C116.058 29.6744 112.289 34.2984 111.991 40.2453L111.291 54.2452H129.928Z'
                    fill='#1B1D22'
                />
                <path
                    d='M134.117 54.695C133.453 52.3994 131.597 50.6436 129.268 50.107L124.343 48.9724H116.875L111.949 50.107C109.62 50.6436 107.765 52.3994 107.101 54.695L105.221 64.6223H135.996L134.117 54.695Z'
                    fill='var(--center-channel-bg)'
                />
                <path
                    opacity='0.24'
                    d='M134.117 54.695C133.453 52.3994 131.597 50.6436 129.268 50.107L124.343 48.9724H116.875L111.949 50.107C109.62 50.6436 107.765 52.3994 107.101 54.695L105.221 64.6223H135.996L134.117 54.695Z'
                    fill='var(--button-bg)'
                />
                <path
                    d='M123.844 49.1791L122.833 45.7231H118.4L117.58 49.1791C119.369 50.139 122.054 50.139 123.844 49.1791Z'
                    fill='var(--center-channel-bg)'
                />
                <path
                    d='M123.844 49.1791L122.833 45.7231H118.4L117.58 49.1791C119.369 50.139 122.054 50.139 123.844 49.1791Z'
                    fill='var(--center-channel-color)'
                    fillOpacity='0.56'
                />
                <path
                    d='M126.947 38.5957C127.568 38.4195 127.597 39.3908 127.361 40.3985C127.146 41.3168 126.947 42.8174 126.3 42.4531C125.52 44.6153 124.099 46.2593 122.38 46.9103C121.846 47.1551 121.279 47.2891 120.691 47.2891C119.933 47.2891 119.211 47.067 118.55 46.6722C117.065 45.9043 115.85 44.3754 115.154 42.4298C114.515 42.5975 114.245 41.0113 114.101 40.3985C113.918 39.6201 113.687 38.5956 114.515 38.5956C114.533 33.8795 117.309 30.0635 120.731 30.0635C124.153 30.0635 126.93 33.8795 126.947 38.5957Z'
                    fill='var(--center-channel-bg)'
                />
                <path
                    d='M126.947 38.5957C127.568 38.4195 127.597 39.3908 127.361 40.3985C127.146 41.3168 126.947 42.8174 126.3 42.4531C125.52 44.6153 124.099 46.2593 122.38 46.9103C121.846 47.1551 121.279 47.2891 120.691 47.2891C119.933 47.2891 119.211 47.067 118.55 46.6722C117.065 45.9043 115.85 44.3754 115.154 42.4298C114.515 42.5975 114.245 41.0113 114.101 40.3985C113.918 39.6201 113.687 38.5956 114.515 38.5956C114.533 33.8795 117.309 30.0635 120.731 30.0635C124.153 30.0635 126.93 33.8795 126.947 38.5957Z'
                    fill='var(--center-channel-color)'
                    fillOpacity='0.56'
                />
                <path
                    d='M127.453 38.6215C127.443 38.6928 127.396 38.756 127.324 38.7917C127.252 38.8273 127.164 38.8314 127.089 38.8018C125.182 38.0754 123.334 36.1163 122.749 34.2774C120.9 36.1958 117.847 38.4392 114.805 38.9322C114.789 38.9353 114.774 38.9363 114.757 38.9363L114.758 38.9373C114.704 38.9373 114.649 38.9221 114.604 38.8946C114.546 38.8579 114.509 38.8018 114.499 38.7407C114.193 36.5446 114.838 32.3895 116.797 31.1075C118.092 30.2596 119.089 29.6962 120.712 29.8026C122.36 29.9106 124.151 30.8035 125.427 31.708C127.32 33.0495 127.719 36.4791 127.453 38.6215Z'
                    fill='#1B1D22'
                />
            </g>
            <path
                d='M82.12 42.589C82.12 52.4595 74.0844 60.4603 64.173 60.4603C58.553 60.4603 53.5359 57.8885 50.2457 53.8614C47.7322 50.7859 46.2261 46.863 46.2261 42.589C46.2261 32.7186 54.2616 24.7178 64.173 24.7178C74.0844 24.7178 82.12 32.7186 82.12 42.589Z'
                fill='var(--center-channel-bg)'
            />
            <path
                d='M82.12 42.589C82.12 52.4595 74.0844 60.4603 64.173 60.4603C58.553 60.4603 53.5359 57.8885 50.2457 53.8614C47.7322 50.7859 46.2261 46.863 46.2261 42.589C46.2261 32.7186 54.2616 24.7178 64.173 24.7178C74.0844 24.7178 82.12 32.7186 82.12 42.589Z'
                fill='var(--center-channel-color)'
                fillOpacity='0.12'
            />
            <mask
                id='mask1_4441_155270'
                mask-type='luminance'
                maskUnits='userSpaceOnUse'
                x='46'
                y='24'
                width='37'
                height='37'
            >
                <path
                    d='M82.12 42.589C82.12 52.4595 74.0844 60.4603 64.173 60.4603C58.553 60.4603 53.5359 57.8885 50.2457 53.8614C47.7322 50.7859 46.2261 46.863 46.2261 42.589C46.2261 32.7186 54.2616 24.7178 64.173 24.7178C74.0844 24.7178 82.12 32.7186 82.12 42.589Z'
                    fill='white'
                />
            </mask>
            <g mask='url(#mask1_4441_155270)'>
                <path
                    d='M80.0061 57.257C79.227 54.7376 77.0521 52.8107 74.3228 52.2216L68.5489 50.9771H59.795L54.0211 52.2216C51.2905 52.8107 49.1156 54.7376 48.3378 57.257L46.1344 68.1522H82.2094L80.0061 57.257Z'
                    fill='var(--center-channel-bg)'
                />
                <path
                    opacity='0.24'
                    d='M80.0064 57.257C79.2273 54.7376 77.0525 52.8107 74.3231 52.2216L68.5492 50.9771H59.7953L54.0215 52.2216C51.2908 52.8107 49.116 54.7376 48.3381 57.257L46.1348 68.1522H82.2098L80.0064 57.257Z'
                    fill='var(--button-bg)'
                />
                <path
                    d='M67.6799 51.4614L66.4982 47.9237H61.3111L60.3518 51.4614C62.4455 52.4441 65.5862 52.4441 67.6799 51.4614Z'
                    fill='var(--center-channel-bg)'
                />
                <path
                    d='M67.6799 51.4614L66.4982 47.9237H61.3111L60.3518 51.4614C62.4455 52.4441 65.5862 52.4441 67.6799 51.4614Z'
                    fill='var(--center-channel-color)'
                    fillOpacity='0.56'
                />
                <path
                    d='M70.749 40.818C71.4203 40.6368 71.4509 41.6354 71.1966 42.6715C70.9641 43.6156 70.749 45.1583 70.0505 44.7838C69.2088 47.0068 67.6738 48.697 65.8172 49.3662C65.2407 49.618 64.628 49.7557 63.9929 49.7557C63.1752 49.7557 62.3948 49.5274 61.6808 49.1214C60.0775 48.332 58.7654 46.7602 58.0138 44.7599C57.3243 44.9322 57.0319 43.3014 56.8767 42.6715C56.6796 41.8711 56.4292 40.8179 57.3243 40.8179C57.3428 35.9691 60.3409 32.046 64.0366 32.046C67.7324 32.046 70.7306 35.9692 70.749 40.818Z'
                    fill='var(--center-channel-bg)'
                />
                <path
                    d='M70.749 40.818C71.4203 40.6368 71.4509 41.6354 71.1966 42.6715C70.9641 43.6156 70.749 45.1583 70.0505 44.7838C69.2088 47.0068 67.6738 48.697 65.8172 49.3662C65.2407 49.618 64.628 49.7557 63.9929 49.7557C63.1752 49.7557 62.3948 49.5274 61.6808 49.1214C60.0775 48.332 58.7654 46.7602 58.0138 44.7599C57.3243 44.9322 57.0319 43.3014 56.8767 42.6715C56.6796 41.8711 56.4292 40.8179 57.3243 40.8179C57.3428 35.9691 60.3409 32.046 64.0366 32.046C67.7324 32.046 70.7306 35.9692 70.749 40.818Z'
                    fill='var(--center-channel-color)'
                    fillOpacity='0.56'
                />
                <path
                    d='M56.7017 31.1748C54.9829 33.2751 54.9468 36.7042 56.6039 39.7757C57.1701 40.4565 57.735 41.136 58.3012 41.8169C58.2838 36.8541 59.0883 35.5172 59.87 35.2737C61.1591 34.8693 62.6864 37.3452 65.4826 37.2833C65.9083 37.2737 66.8627 37.2393 67.4463 36.5708C67.9496 35.9945 67.8733 35.2875 68.0245 35.2723C68.2748 35.2476 68.7259 36.5983 69.5933 41.8155C70.1515 41.1305 70.711 40.4442 71.2692 39.7592C71.5744 38.568 71.8555 37.0054 71.8742 35.165C71.8997 32.6768 70.6804 31.1017 70.2453 29.7028C68.6042 33.8448 66.9509 28.6788 61.6798 28.6872C59.9678 28.69 57.8274 29.7993 56.7017 31.1748Z'
                    fill='#1B1D22'
                />
            </g>
            <circle
                cx='91.2669'
                cy='55.5572'
                r='25.3433'
                fill='var(--center-channel-bg)'
            />
            <circle
                cx='91.1111'
                cy='55.5572'
                r='23.5112'
                fill='var(--center-channel-color)'
                fillOpacity='0.16'
            />
            <mask
                id='mask2_4441_155270'
                mask-type='luminance'
                maskUnits='userSpaceOnUse'
                x='67'
                y='32'
                width='48'
                height='48'
            >
                <path
                    d='M67.6584 55.5572C67.6584 68.5427 78.216 79.0685 91.2382 79.0685C98.6222 79.0685 105.214 75.685 109.537 70.387C112.839 66.3409 114.818 61.18 114.818 55.5572C114.818 42.5718 104.26 32.046 91.2382 32.046C78.216 32.046 67.6584 42.5718 67.6584 55.5572Z'
                    fill='white'
                />
            </mask>
            <g mask='url(#mask2_4441_155270)'>
                <path
                    d='M76.4501 68.3815C78.8909 66.6494 87.4336 65.0135 91.3998 64.4121C95.061 65.1338 103.421 67.0825 107.57 69.1033C111.719 71.1241 112.35 77.403 112.146 80.2898H70.6533C70.6533 72.351 73.3992 70.5467 76.4501 68.3815Z'
                    fill='var(--center-channel-bg)'
                />
                <path
                    d='M76.4501 68.3815C78.8909 66.6494 87.4336 65.0135 91.3998 64.4121C95.061 65.1338 103.421 67.0825 107.57 69.1033C111.719 71.1241 112.35 77.403 112.146 80.2898H70.6533C70.6533 72.351 73.3992 70.5467 76.4501 68.3815Z'
                    fill='var(--center-channel-color)'
                    fillOpacity='0.8'
                />
                <path
                    d='M96.9126 65.6335L95.1893 60.1373H87.6247L86.2257 65.6335C89.2791 67.1602 93.8592 67.1602 96.9126 65.6335Z'
                    fill='var(--center-channel-bg)'
                />
                <path
                    d='M96.9126 65.6335L95.1893 60.1373H87.6247L86.2257 65.6335C89.2791 67.1602 93.8592 67.1602 96.9126 65.6335Z'
                    fill='var(--center-channel-color)'
                    fillOpacity='0.56'
                />
                <path
                    d='M101.516 49.9382C102.523 49.6696 102.569 51.1503 102.188 52.6865C101.839 54.0864 101.516 56.3738 100.469 55.8186C99.2061 59.1147 96.9036 61.6209 94.1187 62.6132C93.2539 62.9865 92.335 63.1907 91.3823 63.1907C90.1558 63.1907 88.9852 62.8522 87.9141 62.2502C85.5092 61.0797 83.541 58.749 82.4137 55.7831C81.3794 56.0386 80.9408 53.6205 80.708 52.6865C80.4124 51.4998 80.0368 49.9381 81.3794 49.9381C81.4071 42.7486 85.9043 36.9314 91.4479 36.9314C96.9916 36.9314 101.489 42.7486 101.516 49.9382Z'
                    fill='var(--center-channel-bg)'
                />
                <path
                    d='M101.516 49.9382C102.523 49.6696 102.569 51.1503 102.188 52.6865C101.839 54.0864 101.516 56.3738 100.469 55.8186C99.2061 59.1147 96.9036 61.6209 94.1187 62.6132C93.2539 62.9865 92.335 63.1907 91.3823 63.1907C90.1558 63.1907 88.9852 62.8522 87.9141 62.2502C85.5092 61.0797 83.541 58.749 82.4137 55.7831C81.3794 56.0386 80.9408 53.6205 80.708 52.6865C80.4124 51.4998 80.0368 49.9381 81.3794 49.9381C81.4071 42.7486 85.9043 36.9314 91.4479 36.9314C96.9916 36.9314 101.489 42.7486 101.516 49.9382Z'
                    fill='var(--center-channel-color)'
                    fillOpacity='0.56'
                />
                <path
                    d='M82.8511 38.9974C84.1737 37.1736 85.1199 36.8624 85.583 36.7102C85.7392 36.6588 85.8404 36.6255 85.8826 36.5583C87.7015 33.6613 95.4923 34.1993 97.5869 35.7793C102.353 39.3742 101.179 41.8552 101.718 44.8136C101.997 46.3312 101.466 48.1935 101.343 49.7558C101.193 48.7194 100.336 45.5263 100.271 45.1756C99.5161 43.3436 96.206 45.5727 94.4699 45.481C90.5698 45.275 87.6487 44.5902 85.583 42.1222C84.9645 44.3108 83.0668 46.9683 81.8883 47.2176L81.6386 49.4339C80.9294 45.5012 80.3681 42.4216 82.8511 38.9974Z'
                    fill='#1B1D22'
                />
            </g>
            <path
                d='M120.463 23.147C124.25 23.1231 127.732 24.1039 130.904 26.0896C132.206 26.9048 133.456 27.8894 134.653 29.0434C136.133 30.5797 137.332 32.2129 138.25 33.9435M139.876 38.135C140.289 39.7447 140.495 41.4261 140.495 43.1797C140.493 45.3005 140.189 47.3175 139.584 49.2303M139.159 35.916C139.294 36.2601 139.419 36.6078 139.534 36.9591'
                stroke='var(--center-channel-color)'
                strokeOpacity='0.48'
            />
            <path
                d='M113.428 71.4636C110.58 75.6164 106.868 78.6732 102.293 80.6289C100.416 81.4318 98.3924 82.0491 96.2244 82.4805C93.4244 82.9302 90.7316 83.0003 88.1457 82.6895M82.3367 81.2836C80.2663 80.5129 78.2741 79.4627 76.3598 78.1322C74.0467 76.5201 72.0751 74.6584 70.446 72.5468M85.3034 82.1842C84.8251 82.0707 84.3507 81.9434 83.8802 81.8021'
                stroke='var(--center-channel-color)'
                strokeOpacity='0.48'
            />
            <path
                d='M64.4212 62.7429C59.9987 62.7094 55.9963 61.3878 52.4254 58.7668C51.6772 58.2175 50.9479 57.6113 50.2376 56.9478C48.3933 54.9693 46.9862 52.8652 46.0148 50.6342M44.3886 42.7102C44.3919 40.0664 44.8765 37.563 45.8423 35.1999C46.8182 32.8119 48.2856 30.5672 50.2444 28.4658'
                stroke='var(--center-channel-color)'
                strokeOpacity='0.48'
            />
        </g>
        <defs>
            <clipPath id='clip0_4441_155270'>
                <rect
                    width='184'
                    height='113'
                    fill='white'
                />
            </clipPath>
        </defs>
    </svg>

);

export default GroupsSVG;
